<template>
  <div>
    <Card shadow>

      <!--      <tree-table expand-key="resourceName" :expand-type="false" :selectable="true" :columns="columns" :data="data"-->
      <!--      >-->
      <!--        <template slot="status" slot-scope="scope">-->
      <!--          <Tag :color="getStatus(scope.row.status).color">{{-->
      <!--              getStatus(scope.row.status).value-->
      <!--            }}</Tag>-->
      <!--        </template>-->
      <!--        <template slot="handle" slot-scope="scope">-->
      <!--          <Button type="info" size="small" style="margin-right: 5px">详情</Button>-->
      <!--          <Button type="warning" size="small" style="margin-right: 5px">修改</Button>-->
      <!--          <Button type="error" size="small">删除</Button>-->
      <!--        </template>-->
      <!--      </tree-table>-->
      <div style="height: 500px">
        <Split v-model="split1">
          <div slot="left" class="demo-split-pane">
            <Button type="primary" @click="showModal">添加资源</Button>&ensp;
            <Button type="error" @click="handle">批量删除</Button>&ensp;
            <Button type="info">批量导入</Button>&ensp;
            <Button type="success" @click="handle">导出为Csv文件</Button>
            <span style="float: right;clear:both;color: #2d8cf0">
            <i-switch v-model="showDelete" size="large" @on-change="handle"/>
                显示删除用户
            </span>
            <div class="search-con search-con-top">
              <Select v-model="searchKey" class="search-col">
                <Option v-for="item in columns" v-if="item.key !== 'handle' &&item.search!==false" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
              </Select>
              <Input clearable placeholder="输入关键字搜索" class="search-input"/>
              <Button class="search-btn" type="primary">
                <Icon type="search"/>&nbsp;&nbsp;搜索
              </Button>
            </div>
            <Table stripe
                   :columns="columns"
                   :data="data"
                   row-key="id"
                   @on-row-click="rowClick"
                   highlight-row
                   height="440"
                   border></Table>
            <div style="text-align: right;margin-top: 10px">
              <Page :total="dataSize"
                    :page-size="pageSize"
                    :current="pageIndex"
                    @on-change="changePage"
                    @on-page-size-change="changeSize"
                    show-total
                    show-elevator
                    show-sizer/>
            </div>
          </div>
          <div slot="right" class="demo-split-pane">
            <div style="width: 100%;text-align: center">
              <h2>资源树型对照</h2>
            </div>
            <Button type="primary" @click="handle" style="margin: 5px 0 5px 10px ">添加权限</Button>&ensp;
            <Button type="error" @click="handle" >批量删除</Button>&ensp;
            <Table
              row-key="id"
              :columns="treeColumns"
              :data="treeData"
              ref="treeTable"
              highlight-row
              stripe
              context-menu
              border
              show-context-menu
              height="460"
            >
            </Table>
          </div>
        </Split>
      </div>
    </Card>
    <AddResource ref="addResource" @refresh="getData()"></AddResource>
  </div>
</template>

<script>
import {getResourceTableData, getResourceTableDataByPageAndSize} from "@/api/data";
import {covertToTreeList} from "@/libs/util";
import {getStatus} from "@/libs/tools"
import AddResource from "@/view/admin/system/AddResource";

export default {
  name: "Resource",
  components: {AddResource},
  data() {
    return {
      searchKey:'',
      split1: 0.75,
      getStatus: getStatus,
      showDelete: false,
      treeColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          search:false
        },
        {
          title: '资源名称',
          key: 'resourceName',
          tree: true,
          resizable: true,
          width: 200,
          minWidth: 150
        },
        {
          title: '资源路径',
          key: 'resourceUrl',
          minWidth: 150,
          tooltip: true,
          resizable: true,
          width: 200
          //minWidth: '50px'
        },
        {
          title: '状态',
          key: 'status',
          minWidth: 90,
          resizable: true,
          maxWidth: 200,
          width: 90,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          },
        }
      ],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          search:false
        },
        {
          title: '资源名称',
          key: 'resourceName',
          minWidth: 150
        },
        {
          title: '资源路径',
          key: 'resourceUrl',
          minWidth: 150
          //minWidth: '50px'
        },
        {
          title: '资源类型',
          key: 'resourceType',
          minWidth: 100
        },
        {
          title: '请求方法',
          key: 'resourceMethod',
          minWidth: 100
        },

        {
          title: '创建时间',
          key: 'createTime',
          minWidth: 180
        },
        {
          title: '修改时间',
          key: 'updateTime',
          minWidth: 180
        },
        {
          title: '状态',
          key: 'status',
          minWidth: 90,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          },
          //type: 'template',
          //template: 'status',
          //minWidth: '50px'
        },
        {
          title: '操作',
          key: 'handle',
          //type: 'template',
          //template: 'handle',
          minWidth: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateUser(params)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteUser(params)
                  }
                }
              }, '删除')
            ]);
          }
        }

      ],
      data: [],
      treeData: [],
      pageIndex: 1,
      pageSize: 10,
      dataSize: 0
    }
  },
  methods: {
    showModal() {
      this.$refs.addResource.showModal();
    },
    handle(scope) {
      console.log(scope)
    },
    rowClick() {

    },
    changePage(page) {
      this.pageIndex = page;
      this.getData();
    },
    changeSize(size) {
      this.pageSize = size;
      this.getData();
    },
    getData() {
      this.loading = true
      getResourceTableDataByPageAndSize(this.pageIndex, this.pageSize).then(data => {
        if (data.data.code !== 200 || !data.data.object.content) {
          this.$Message.error(data.data.message);
        } else {
          this.data = data.data.object.content;
          this.dataSize = data.data.object.totalElements;
        }
        this.loading = false
      });
    }
  },
  mounted() {
    this.getData();
    getResourceTableData().then(data => {
      if (data.data.code !== 200 || !data.data.object) {
        this.$Message.error(data.data.message);
      } else {
        this.treeData = covertToTreeList(data.data.object);
      }
      this.loading = false
    })
  }
}
</script>

<style scoped>

</style>
